<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="lib/layui/css/layui.css" />
<script type="text/javascript" src="lib/layui/layui.js"></script>

<style type="text/css">
.layui-table-cell {
	height: auto;
	width: auto;
}
/* #product{
		margin-bottom: -60px;
	}
	 */
#addProduct {
	margin-right: -10px;
}

#xiaLaKuang {
	padding-right: -30px;
}

#xiaLaKuang1 {
	padding-right: -30px;
}
</style>
</head>
<body>
	<form class="layui-form" action="">

		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="ProductName" id="ProductName"
					lay-verify="title" autocomplete="off" placeholder="请输入标题"
					class="layui-input">
			</div>
			<label class="layui-form-label">正常价</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="unitPrice" id="unitPrice" placeholder="￥"
					autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid">折扣</div>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="discountPrice" id="discountPrice"
					placeholder="￥" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">分类</label>
			<div class="layui-input-inline">
				<select name="pcName" id="pcName" lay-filter="aihao">
					<option value=""></option>
					<option value="篮球">篮球</option>
					<option value="足球">足球</option>
					<option value="羽毛球">羽毛球</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<select name="brand" id="brand">
					<option value="" selected="">品牌</option>
					<option value="阿迪">阿迪</option>
				</select>
			</div>
			<button type="submit" class="layui-btn" lay-submit=""
				lay-filter="demo1">搜索</button>
			<button type="submit" class="layui-btn" lay-submit=""
				lay-filter="addProduct">添加</button>
		</div>
	</form>

	<table id="product" lay-filter="test"></table>
	<div id="div_product" style="display: none;"margin-top: 20px;">
		<form class="layui-form" lay-filter="form_product" id="form_product"
			action="">
			<input type="hidden" id="id" name="id" class="huoQuId" />
			<div class="layui-form-item">
				<label class="layui-form-label">产品名称:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="ProductName" name="ProductName"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">分类</label>
				<div class="layui-input-inline">
					<select name="CategoryId" id="CategoryId" lay-filter="aihao">
						<option value=""></option>
						<option value="1">篮球</option>
						<option value="2">足球</option>
						<option value="3">羽毛球</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">正常售价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="unitPrice" name="unitPrice"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">当前折扣价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="discountPrice" name="discountPrice"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">品牌</label>
				<div class="layui-input-inline">
					<select name="brand" id="brand">
						<option value="" selected="">品牌</option>
						<option value="阿迪">阿迪</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label for="cname" class="layui-form-label"> <span
					class="x-red">*</span>图片
				</label>
				<div class="layui-input-inline">
					<input type="text" id="img" name="img" required=""
						lay-verify="required" autocomplete="off" class="layui-input">

					<div class="layui-form-item">
						<div class="layui-input-inline">
							<img id="imgFace" style="width: 120px" id="" src=""> <br />

							<button type="button" class="layui-btn" id="test1">
								<i class="layui-icon">&#xe67c;</i>上传图片
							</button>

						</div>
						<div class="layui-form-mid layui-word-aux">
							<span class="x-red"></span>

						</div>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">大小:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="size1" name="size1" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">颜色</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="color1" name="color1" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">产品重量：</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="weight" name="weight" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">是否上架</label>
				<div class="layui-input-inline">
					<select id="canUse" name="canUse">
						<option>是否上架</option>
						<option value="是">上架</option>
						<option value="否">下架</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">库存:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="store" name="store" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">描述信息:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="comment" name="comment" class="layui-input">
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" id="addProducts" lay-filter="addProducts"
					lay-submit="">添加</button>
				<button class="layui-btn" id="updateProducts"
					lay-filter="updateProducts" lay-submit="">修改</button>
			</div>
		</form>
	</div>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	<script>
		var table, form, layer, $,upload;
		layui.use([ 'table', 'form', 'layer','upload'], function() {
			table = layui.table;
			form = layui.form;
			layer = layui.layer;
			$ = layui.$;
			upload = layui.upload;
			//第一个实例
			table.render({
				elem : '#product',
				id : 'productTable',
				url : '../getProductByWhereHT' //数据接口
				,
				page : true //开启分页
				,
				cols : [ [ //表头
				{
					field : 'id',
					title : '商品编号ID',
					width : 80,
					sort : true,
					fixed : 'left'
				}, {
					field : 'img',
					title : '商品图片',
					
					templet : '<div><img src="../images/temp/{{d.img}}"   title="{{d.img}}"/></div>'
				}, {
					field : 'ProductName',
					title : '商品名称',
					
					sort : true
				}, {
					field : 'pcName',
					title : '商品分类'
					
				}, {
					field : 'unitPrice',
					title : '正常价',
					width : 177
				}, {
					field : 'discountPrice',
					title : '折扣价',
					width : 80,
					sort : true
				}, {
					field : 'score',
					title : '库存',
					width : 80,
					sort : true
				}, {
					field : 'canUse',
					title : '是否上架'
					
				}, {
					field : 'brand',
					title : '品牌',
					width : 135,
					sort : true
				}, {
					align : 'center',
					toolbar : '#barDemo'
				} ] ]
			});

			//上传图片
			var uploadInst = upload.render({
  				elem : '#test1',//绑定元素
  				acceptMime:'image/*',
  				url : '../upload?reqName=UploadImg',//上传接口
  				
  				done : function(res) {
  					//上传完毕回调
  					if (res.success) { //把返回的图片名，放到img标记的src里面 
  						
  						$("#imgFace").attr("src", "../images/" + res.remark); //把返回的图片名，保存在隐藏域里面
  						$("#img").val(res.remark);
  						layer.msg('新图片上传成功', {
  							icon : 6,
  							time : 1500
  						});
  					}
  				},
  				error : function() {
  					//请求异常回调
  					layer.msg('图片上传失败', {
  						icon : 6,
  						time : 1500
  					});
  				}
  			});
			
			
			
			form.on('submit(demo1)', function(data) {
				alert("皮一下")
				table.reload("productTable", {
					where : { //设定异步数据接口的额外参数，任意设
						ProductName : $('#ProductName').val(),
						unitPrice : $("#unitPrice").val(),
						discountPrice : $("#discountPrice").val(),
						pcName : $("#pcName").val(),
						brand : $("#brand").val()
					},
					page : {
						curr : 1
					//重新从第 1 页开始
					}
				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			form.on('submit(addProduct)', function(data) {
				
				document.getElementById("form_product").reset();
				layer.open({
					type : 1,
					content : $("#div_product"),
					area : [ "800px", "750px" ]
				/* title:"您正在編輯"+obj.data.pName+"的數據" */

				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			form.on('submit(updateProducts)', function(data) {
				alert("我是修改")
				$.post("../updateProduct", $("#form_product").serialize(),
						function(res) {
							layer.msg(res.msg);
							if (res.code == "0") {
								//关闭所有弹框
								layer.closeAll();
								//刷新表格
								table.reload("productTable");
							}
						}, "json");
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			
			form.on('submit(addProducts)', function(data) {
				
				
				alert("我是添加")
				$.post("../addProduct", $("#form_product").serialize(),
						function(res) {
							layer.msg(res.msg);
							if (res.code == "0") {
								//关闭所有弹框
								layer.closeAll();
								//刷新表格
								table.reload("productTable");
							}
						}, "json");
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//监听工具条 
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					$("#imgFace").attr("src","../images/temp/" + data.img);
					$("#addProducts").hide(); 
					//给form表单赋值数据
					form.val("form_product", data);
					layer.open({
						type : 1,
						content : $("#div_product"),
						area : [ "800px", "750px" ]
					/* title:"您正在編輯"+obj.data.pName+"的數據" */

					});

				} else if (layEvent === 'del') { 
					
					var id=data.id;
					
					//删除
					layer.confirm('真的删除行么', function(index) {
						$.post("../delProduct", {ids:id},
								function(res) {
									layer.msg(res.msg);
									if (res.code == "0") {
										//关闭所有弹框
										//layer.closeAll();
										//刷新表格
										table.reload("productTable");
									}
								}, "json");
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。					
					});
				} else if (layEvent === 'edit') { //编辑
					$("#imgFace").attr("src","../images/temp/" + data.img);
					//给form表单赋值数据
					form.val("form_product", data);
					layer.open({
						type : 1,
						content : $("#div_product"),
						area : [ "800px", "750px" ]
					/* title:"您正在編輯"+obj.data.pName+"的數據" */

					});
					
					
				} else if (layEvent === 'LAYTABLE_TIPS') {
					layer.alert('Hi，头部工具栏扩展的右侧图标。');
				}
			});

		});
	</script>
</body>
</html>